<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
      rel="stylesheet"
    />
    <title>Table Component</title>
    <style>
      /*
      SPACING SYSTEM (px)
      2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128

      FONT SIZE SYSTEM (px)
      10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
      */

      /* 
      MAIN COLOR: #087f5b
      GRAY COLOR: #343a40
      */

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        font-family: "Inter", sans-serif;
        color: #343a40;
        line-height: 1;

        display: flex;
        justify-content: center;
      }

      table {
        width: 800px;
        margin-top: 100px;
        font-size: 18px;
        /* border: 1px solid #343a40; */
        border-collapse: collapse;
      }

      th, td {
        /* border: 1px solid #343a40; */
        padding: 16px 24px;
        text-align: left;
      }

      thead tr {
        background-color: #087f5b;
        color: #fff;
      }

      thead th {
        width: 25%;
      }

      tbody tr:nth-child(odd) {
        background-color: #f8f9fa;
      }

      tbody tr:nth-child(even) {
        background-color: #e9ecef;
      }
    </style>
  </head>

  <body>
    <table>
      <thead>
        <tr>
          <th>Chair</td>
          <th>The Laid Back</td>
          <th>The Worker Bee</td>
          <th>The Chair 4/2</td>
        </tr>
      </thead>

      <tbody>
        <tr>
          <th>Width</td>
          <td>80 cm</td>
          <td>60 cm</td>
          <td>220 cm</td>
        </tr>

        <tr>
          <th>Height</td>
          <td>100 cm</td>
          <td>110 cm</td>
          <td>90 cm</td>
        </tr>

        <tr>
          <th>Depth</td>
          <td>70 cm</td>
          <td>65 cm</td>
          <td>80 cm</td>
        </tr>

        <tr>
          <th>Weight</td>
          <td>16 kg</td>
          <td>22 kg</td>
          <td>80 kg</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
